<template>
    <el-dialog title="图书导入"
               :visible.sync="this.isShow"
               width="70%"
               center
               :show-close="false">
        <el-form inline
                 v-for="(book, index) in books"
                 :key="index"
                 v-loading="loading">
            <el-form-item label="网址">
                <el-input placeholder="请输入网址(暂仅支持京东)"
                          v-model="book.url.text"
                          class="book_url"
                          @blur="book.url.text && addBook(index)">
                    <el-select v-model="book.url.type"
                               slot="prepend"
                               placeholder="选择网址">
                        <el-option label="京东"
                                   value="JD"></el-option>
                    </el-select>
                    <el-button slot="append"
                               icon="el-icon-check"
                               @click="addBook(index)"></el-button>
                    <el-button slot="append"
                               icon="el-icon-plus"
                               @click="add"
                               v-if="index === books.length-1"></el-button>
                </el-input>
            </el-form-item>
            <el-form-item label="书名">
                <el-input placeholder="书名"
                          v-model="book.message.bookName"
                          class="book_name">
                </el-input>
            </el-form-item>
            <el-form-item label="作者">
                <el-input placeholder="作者"
                          v-model="book.message.auth">
                </el-input>
            </el-form-item>
        </el-form>
        <el-form>
            <el-form-item>
                <el-button type="primary"
                           @click="onSubmit">确定</el-button>
                <el-button @click="cancel">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</template>

<script>
import request from "@/utils/request";
import { getToken } from "@/utils/auth";

export default {
  name: "",
  data() {
    return {
      books: [
        {
          url: {
            text: "",
            type: "JD"
          },
          message: {
            bookName: "",
            auth: "",
            introduction: ""
          }
        }
      ],
      loading: false
    };
  },
  props: {
    option: Object
  },
  computed: {
    isShow: {
      get: function() {
        return this.option.show;
      },
      set: function(value) {
        this.option.show = value;
      }
    }
  },
  methods: {
    cancel() {
      this.isShow = false;
    },
    onSubmit() {
      var submitter = getToken();
      this.books.forEach(book => {
        return request({
          url: "book/add",
          data: {
            name: book.message.bookName,
            author: book.message.auth,
            type: [""],
            submitter: submitter.substring(0, submitter.indexOf("/"))
          }
        }).then(result => {
          this.$message({
            message: "添加成功",
            type: "success"
          });
          this.$emit("addSuccess", result);
          this.option.show = false;
        });
      });
    },
    add() {
      this.books.push({
        url: {
          text: "",
          type: ""
        },
        message: {
          bookName: "",
          auth: "",
          introduction: ""
        }
      });
    },
    addBook(index) {
      this.loading = true;
      return request({
        url: "book/importBook",
        data: {
          url: this.books[index].url
        }
      }).then(data => {
        this.books[index].message = data.data;
        this.loading = false;
      });
    }
  }
};
</script>

<style scoped>
.book_url {
  width: 500px;
  background-color: #fff;
}
.book_name {
  width: 300px;
}
.el-select {
  width: 110px;
}
</style>


